
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { MapPin, Target, Lightbulb } from "lucide-react";

const interestResults = {
  topCategories: [
    { code: "S", name: "Social", score: 90, color: "#f59e0b", description: "People-oriented, helping others" },
    { code: "I", name: "Investigative", score: 85, color: "#3b82f6", description: "Research and analytical thinking" },
    { code: "A", name: "Artistic", score: 70, color: "#8b5cf6", description: "Creative self-expression" }
  ],
  careerMatches: [
    "Psychology Researcher",
    "Social Data Scientist", 
    "Educational Counselor",
    "Community Health Analyst"
  ],
  learningRecommendations: [
    "Communication Skills Development",
    "Research Methods & Data Analysis", 
    "Psychology & Human Behavior",
    "Creative Problem-Solving Techniques"
  ]
};

export function InterestExplorerResults() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-lg">
          <MapPin className="w-5 h-5 text-orange-600" />
          Interest Explorer Results
        </CardTitle>
        <CardDescription>Assessment completed on April 25, 2025</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          <div className="bg-orange-50 p-4 rounded-lg border border-orange-200">
            <h4 className="font-semibold text-lg mb-2 text-orange-900">Social-Investigative Profile</h4>
            <p className="text-sm text-orange-700 mb-4">
              Your interests strongly align with Social (90%) and Investigative (85%) categories, 
              indicating you thrive in people-focused research and analytical roles that make a positive impact.
            </p>
            
            {/* RIASEC Summary */}
            <div className="grid grid-cols-3 gap-3 mb-4">
              {interestResults.topCategories.map(category => (
                <div key={category.code} className="text-center">
                  <div 
                    className="w-12 h-12 rounded-full mx-auto mb-2 flex items-center justify-center text-white font-bold"
                    style={{ backgroundColor: category.color }}
                  >
                    {category.code}
                  </div>
                  <p className="text-xs font-medium">{category.name}</p>
                  <p className="text-xs text-muted-foreground">{category.score}%</p>
                </div>
              ))}
            </div>
          </div>

          {/* Career Matches */}
          <div className="space-y-3">
            <h5 className="font-medium flex items-center gap-2">
              <Target className="w-4 h-4" />
              Top Career Matches
            </h5>
            <div className="grid grid-cols-2 gap-2">
              {interestResults.careerMatches.map(career => (
                <Badge key={career} variant="outline" className="justify-center py-2">
                  {career}
                </Badge>
              ))}
            </div>
          </div>

          {/* Learning Recommendations */}
          <div className="space-y-3">
            <h5 className="font-medium flex items-center gap-2">
              <Lightbulb className="w-4 h-4" />
              Recommended Learning Areas
            </h5>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
              {interestResults.learningRecommendations.map(recommendation => (
                <Badge key={recommendation} variant="secondary" className="justify-center py-2">
                  {recommendation}
                </Badge>
              ))}
            </div>
          </div>

          <div className="pt-4 border-t">
            <div className="flex gap-2">
              <Button variant="outline" size="sm">
                View Detailed Analysis
              </Button>
              <Button variant="outline" size="sm">
                Explore Career Paths
              </Button>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
